元件分類原則

2023 iThome 鐵人賽

DAY 5

Modern Web

捨棄 create-react-app 之餘還架了個 astro blog 昭告天下系列第 5 篇

15th鐵人賽

查理狐狐

2023-09-20 07:45:34

235 瀏覽

分享至

昨天說明了整包專案的資料夾結構規劃方式，今天來聊聊個人通常會根據哪些規則來分類 React 元件。

src/component 內容

以一個包含「landing page、全產品一覽、單一產品詳細頁」這三個畫面的 React app 專案來說，我規劃的 src/component 結構大致上會長這樣：

src/component
├── AppEntryPoint
│   └── index.tsx
├── Common
│   ├── ListItem
│   ├── SideBar
│   ├── SearchBar
│   └── TopNav
├── Layer
│   ├── AppRoutes
│   ├── Dialog
│   ├── GA4
│   ├── MuiThemeInject
│   └── ReduxProvider
├── Layout
│   └── Main
└── Page
    ├── LandingPage
		├── Products
    ├── SingleProduct
    └── NotFound

而以下會依照元件粒度從大到小，依序介紹個人的分類規則。

AppEntryPoint

這個資料夾內只會有一個元件，即整個 React app 的入口。

這個元件唯一的任務，就是引用整個專案中會使用到的其他元件與資料層，個人不會在這裡執行任何額外的邏輯運算任務了。

import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
import AppRoutes from '@Component/Layer/AppRoutes';
import Dialog from '@Component/Layer/Dialog';
import GA4 from '@Component/Layer/GA4';
import MuiThemeInject from '@Component/Layer/MuiThemeInject';
import ReduxProvider from '@Component/Layer/ReduxProvider';
import '@Style/css/global.css';
import '@Tool/dayjsGlobalSetting';

function AppEntryPoint(): React.ReactElement {
  return (
    <HelmetProvider>
      <MuiThemeInject>
        <ReduxProvider>
          <AppRoutes />
          <Dialog />
          <GA4 />
        </ReduxProvider>
      </MuiThemeInject>
    </HelmetProvider>
  );
}

export default AppEntryPoint;

Layer

如果一個元件帶有以下屬性，通常會被我歸類到 src/component/Layer 資料夾：

只有功能、沒有畫面的元件；比如 GA4 / MuiThemeInject / ReduxProvider
整個 React app 都會用到的全域元件，比如 AppRoutes 或 Dialog

此類元件通常不需要透過 props 來接收資料。在真的有讀取資料的需求時（比如 Dialog 元件需要動態地控制對話框內文），基本上也是透過 Redux store 來取得資料。

Layout

這個資料夾負責收納無功能邏輯、僅有排版作用的元件。假設一個 React app 專案大部分的畫面都包含「一個 TopNav 搭配下方的內容區塊」，那麽 src/component/Layout 中大概就會有一個叫做 MainLayout 的檔案：

import React, { memo, PropsWithChildren } from 'react';
import TopNav from '@Component/Common/TopNav';
import moduleStyle from './index.module.css';

function MainLayout({ children }: PropsWithChildren): React.ReactElement {
  return (
    <div className={moduleStyle.container}>
      <ContractPageNav />
      <div className={moduleStyle.main_wrapper}>{children}</div>
    </div>
  );
}

export default memo(MainLayout);

現在所有外觀是「一個 TopNav 搭配下方的內容區塊」的元件就可以直接複用 MainLayout 的排版了。